<template>
  <div>
    <div style="display: flex">
      <van-search style="width: 88%" v-model="searchVal" placeholder="请输入搜索关键词" @search="onSearch"/>
      <div style="width: 12%;display: flex;justify-content: center;align-items: center">
        <van-button style="height: 40px;width: 40px"  round color="#e5e5e5" @click="$router.push('/index/activity')"  type="default">
          <van-icon style="font-size: 30px" name="plus"/>
        </van-button>
      </div>
    </div>


    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in picture">
        <van-image width="100%" height="200px" @click="$router.push('/index/explore/detailed?id=' + item.activityId)" :src="item['picture'+index]"></van-image>
      </van-swipe-item>
    </van-swipe>

    <talk-card
        style="margin-top: 3px"
        v-for="(item,index) in activities"
        :name="item.user.userName"
        :avatar="item.user.userHead"
        :time-ago="item.updateTime"
        :num="item.loveNumber"
        :text="item.content"
        :id="item.id"
        :activity-name="item.activityName"
        :picture="item.picture"
        :like="item.love"
    ></talk-card>
    <div style="height: 44px"></div>
  </div>
</template>

<script>
import talkCard from '@/components/TalkCard/index';

export default {
  name: "Home",
  data() {
    return {
      activities: [],
      comment: [],
      picture: [],
      searchVal: ''
    }
  },
  components: {talkCard},
  created() {
    this.request();
  },
  activated() {
    this.request();
  },
  methods: {
    getHotActivities() {
      return axios.get('/activity/hot', {
        params: {pageSize: 20},
        headers: {isShowFullLoading: 'F'}
      })
    },
    getPicture() {
      return axios.get('/activity/getPictures')
    },
    request() {
      return axios.all([this.getPicture(), this.getHotActivities()])
          .then(axios.spread((pic, act) => {
            this.picture = pic.result;
            this.activities = [];
            this.activities.push(...act.result.result);
            //数据整理
            this.activities = this.activities.map((item) => {
              if (item.user.ybUserHead !== null || item.user.userHead == '' || item.user.userHead == null) {
                item.user.userHead = item.user.ybUserHead;
              }
              item.updateTime = _g.timeAgo(item.updateTime);
              item.picture = [];
              if (item.picture1) {
                item.picture.push(item.picture1);
              }
              if (item.picture2) {
                item.picture.push(item.picture2);
              }
              if (item.picture3) {
                item.picture.push(item.picture3);
              }
              return item;
            })
          }));
    },
    onSearch(e) {
      console.log(e);
    }
  }
}
</script>

<style scoped>
.q {
  color: #e5e5e5;
}
</style>
